!!! 5
%html
    %head
        - ["https://code.jquery.com/jquery-3.3.1.min.js", "basic.js", "demo.js", "random.js", "quotes.js"].each do |f|
            %script{type: "text/javascript", src: f}
        %script{type: "text/javascript", src: "quotes.json"}
        %link{rel:"stylesheet", type:"text/css", href:"index.css"}/
        %link{rel:"stylesheet", type:"text/css", href:"matrix.css"}/
        %link{type:"image/x-icon", rel:"shortcut icon", href: "logo.ico"}/ 
        %meta{charset:"utf-8"}/
  
    %body

        %canvas{id:'c'}

        :javascript
            var show;
            function surprise() {
              if (document.getElementById("surprise").innerHTML === "😻Surprise"){
                var c=document.getElementById('c'), s=window.screen, w=c.width, h=c.height;
                show = showMatrix(c, s.width, s.height);
                document.getElementById('surprise').innerHTML='😲Stop';}
              else {
                clearInterval(show);
                document.getElementById('surprise').innerHTML='😻Surprise';
                c=document.getElementById("c");
                c.getContext("2d").clearRect(0,0,c.width,c.height);
              }
            }

            function getQuote() {
              showQuote(choice(quotes));
            }

            function showQuote(quote) {
              if (typeof quote === 'string') {
                document.getElementById("content").innerHTML = quote;
                document.getElementById("author").innerHTML = 'unknown';
              }
              else{
                document.getElementById("content").innerHTML = quote['content'];
                document.getElementById("author").innerHTML = quote['author'];
              }
            }

            const value = ["富强", "民主", "文明", "和谐",
            "自由", "平等", "公正", "法治",
            "爱国", "敬业", "诚信", "友善"];

            const colors = ["red", "blue", "yellow", "cyan",
            "purple", "pink", "black", "green",
            "orange", "magenta", "brown"];

            var index = 0;

            jQuery("body").click(function(e) {
                var $i = jQuery("<span/>").text(value[index]);
                index = index + 1;
                if (index >= 12) {index = index - 12;}

                $i.css({
                    "z-index": 144469,
                    "top": e.pageY - 20,
                    "left": e.pageX,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": choice(colors)
                });
                jQuery("body").append($i);
                $i.animate({
                    "top": e.pageY - 180,
                    "opacity": 0
                },
                1500,
                $i.remove);
            });

        %div{class: "header"}
            %div{id: "time"}
                :javascript
                    document.write(getdate('⌚'))

        %div{class: "show-quote"}
            %div
            %button{onclick: "getQuote();"} 🎲一句名言
            %button{onclick: "showQuote(randomFromFile('quotes.json'));"} 🎲一句名言 (不推荐)
            %button{onclick: "showQuote('blahblahblah...');"} 🙂Click Me

            %div{class: "text"}
                %div{id: "content"}
                %div{id: "author"}

            %textarea{id: "yours", rows: "5", placeholder: "写下你的格言", onchange: "document.getElementById('confirm').disabled=false;"}
            %button{id: "confirm", onclick: "showQuote(document.getElementById('yours').value);", disabled: "disabled"} 确定

        
        %div{class: "container"}
            %img{class: "img", width: 100, height: 250, src: "https://hbimg.huabanimg.com/79d0e5196d7d96057300ef3e50e03b412e3550702a988-4lK3MJ_fw658"}/

        %div{id: "html-files"}
            作品展示
            %a{href: "photowall.html"} Photo Wall
            %button{id: 'surprise', onclick: "surprise();"} 😻Surprise
        %br/
        %p
            :markdown
                # 问候

                你好, *世界*

                ## 计划

                - [ ] 
                每周抽点时间，建设网站；
                学习新技术，展示一下自己
                - [x] 
                买东西过冬
                - [ ] 
                看一部好看的电影
                - [ ] 
                倾听自我
                - [ ]
                其他 blahblahblah...

                ## 座右铭
                - 一件事情一旦要重复做两次以上，那就有价值去考虑如何自动化完成了。
                - 我的长项是提问，弱项是不知道如何提问。

                ## 其他
                
                没有其他了

        友情链接
        %a{id: "mylink", href: "http://www.brainyquote.com", onclick: "pass();"} Brainyquote
